<template>
  <div>
    <!-- 头像资料区域 -->
    <div class="profile-box">
      <!-- 我们用了插件pxtorem他可以在打包时自动把px转rem -->
      <!-- 用rem才能适配，但是它不能转行内样式 -->
      <van-image fit="cover" round :src="$store.state.userInfo.photo" />

      <!-- 资料 -->
      <div class="info-box">
        <h4>{{ $store.state.userInfo.name }}</h4>
        <span>{{ $store.state.userInfo.birthday }}</span>
      </div>
    </div>

    <!-- 快捷工具区域 -->
    <van-row>
      <van-col span="8">
        <van-icon color="#3296fa" name="newspaper-o" />
        <div>我的作品</div>
      </van-col>
      <van-col span="8">
        <van-icon color="#f00" name="star-o" />
        <div>我的收藏</div>
      </van-col>
      <van-col span="8">
        <van-icon color="orange" name="tosend" />
        <div>阅读历史</div>
      </van-col>
    </van-row>

    <!-- cell区域 -->
    <van-cell-group>
      <van-cell to="/mine/edit" icon="edit" title="编辑资料" is-link/>
      <van-cell to="/mine/chat" icon="chat-o" title="小智同学" is-link/>
      <van-cell icon="setting-o" title="系统设置" is-link/>
      <van-cell @click="doLogout" icon="info-o" title="退出登录" is-link/>
    </van-cell-group>
  </div>
</template>

<script>
export default {

  data() {
    return {
      // userInfo: {}
    }
  },

  methods: {
    doLogout () {
      // 做退出
      // 1. 清空token
      this.$store.commit('logout')

      // 2. 跳转到登录页
      this.$toast('退出成功')
      this.$router.push('/login')
    }
  },

  // 我的页面
  async created () {
    // 发请求获取资料
    // const res = await userInfoAPI()
    // this.userInfo = res.data
    
    // 发请求拿到数据了
    this.$store.dispatch('reqUserInfo')
  }
};
</script>

<style scoped lang="less">
// 头像资料区域
.profile-box {
  // 声明变量
  @color: #3296fa;
  height: 140px;
  background-color: @color;
  display: flex;
  align-items: center;

  // vant特点：任何标签都有一个同名的类
  .van-image {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-right: 10px;
  }

  .info-box {
    color: #fff;
    h4 {
      font-size: 18px;
      margin-bottom: 10px;
    }
    span {
      background-color: #fff;
      color: @color;
      font-size: 16px;
      padding: 3px;
    }
  }
}

// 快捷工具区域
.van-row {
  .van-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 70px;
    .van-icon {
      font-size: 30px;
      margin-bottom: 5px;
    }
  }
}
</style>